{% extends 'overview/base.html' %}

{% block external %}
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/users/login.css' %}"/>
{% endblock %}

{% block title %}
	重置密码
{% endblock %}

{% block main %}
	<div class="container">
		<div class="row">
      <div class="col-sm-4 col-sm-offset-4">
        <form class="login-box" role="form" action="{% url 'users:retrieve-password' user.id %}" method="post">
          {% csrf_token %}
          <!--开头的重置密码-->
          <div class="text-center">
            <h4>~重置密码~</h4>
          </div>
          <hr/>
          <!--用户名框，只做显示作用-->
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" disabled value="{{ user.username }}"/>
          </div>
          <br/>
          <!--密码框-->
          <!--密码不一致的错误提示-->
          {% if password_error %}
            <div class="input-group has-error">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password" class="form-control" placeholder="密码" value="{{ password }}"/>
            </div>
            <p class="text-danger small">*{{ password_error }}</p>
          {% else %}
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password" class="form-control" placeholder="密码" value="{{ password }}"/>
            </div>
            <p class="text-warning small">*密码应该在8-30个字符以内</p>
          {% endif %}
          <br/>
          {% if password_error %}
            <div class="input-group has-error">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password_confirm" class="form-control" placeholder="确认密码" value="{{ password_confirm }}"/>
            </div>
          {% else %}
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password_confirm" class="form-control" placeholder="确认密码" value="{{ password_confirm }}"/>
            </div>
          {% endif %}
          <hr/>
          <!---保存按钮-->
          <button type="submit" class="btn btn-primary btn-block">保存</button>
        </form>
      </div>
		</div>
	</div>
{% endblock %}